<template>
  <div class="calendarBox">
    <el-radio-group v-model="activeIndex" class="fixedBtn" size="mini" @change="onRadioChange">
      <el-radio-button label="年"></el-radio-button>
      <el-radio-button label="月"></el-radio-button>
    </el-radio-group>

    <div v-show="activeIndex === '月'">
      <el-calendar v-model="currentDate">
        <template slot="dateCell" slot-scope="scope">
          <p :class="scope.data.isSelected ? 'is-selected' : ''" @click="onCellHandle($event, scope.data)">
            {{ scope.data.day.split("-").slice(1).join("-") }} {{ scope.data.isSelected ? "✔️" : "" }}
          </p>
        </template>
      </el-calendar>
    </div>

    <div v-show="activeIndex === '年'">
      <el-card class="yearBox" shadow="never">
        <div slot="header" class="clearfix">
          <el-select v-model="currentYear" placeholder="请选择年份" size="mini">
            <el-option v-for="year in yearList" :key="year" :label="`${year}年`" :value="year">{{ year }}年</el-option>
          </el-select>
        </div>
        <table>
          <tbody>
            <tr v-for="(item, index) in monthList" :key="index">
              <td
                v-for="month in item"
                :key="month"
                :class="{ 'is-selected-month': month === currentMonth }"
                @click="onMonthHandle($event, month)"
              >
                <span>{{ month }}月</span>
              </td>
            </tr>
          </tbody>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "CalendarIndex",
  data() {
    return {
      activeIndex: "月",
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      currentDate: new Date(),
      monthList: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12],
      ],
      yearList: [],
    };
  },
  created() {
    const year = this.currentYear;
    for (let i = year - 10; i <= year + 10; i++) {
      this.yearList.push(i);
    }
  },
  methods: {
    onCellHandle(e, data) {
      this.$message.success(`当前选择时间为：${data.day}`);
    },
    onMonthHandle(e, item) {
      this.currentMonth = item;
      this.$message.success(`当前选择时间为：${this.currentYear}年${this.currentMonth}月`);
    },
    onRadioChange(label) {
      if (label === "月") {
        const _date = this.currentDate.getDate();
        this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}-${_date}`);
      } else if (label === "年") {
        this.currentYear = this.currentDate.getFullYear();
        this.currentMonth = this.currentDate.getMonth() + 1;
      } else {
        console.log("error");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.calendarBox {
  position: relative;
  width: 800px;
  background: lightblue;

  ::v-deep .el-calendar__header {
    padding-left: 200px;
  }
}

::v-deep .fixedBtn {
  position: absolute;
  top: 12px;
  left: 20px;
  z-index: 10;
}

::v-deep .yearBox {
  border-radius: 0;

  .el-card__header {
    padding: 12px 20px;
    text-align: right;
  }

  .el-card__body {
    padding: 12px 20px 35px;
  }

  table {
    width: 100%;

    td {
      height: 45px;
      padding: 8px;
      vertical-align: top;
      border: 1px solid #ebeef5;
    }
  }
}

::v-deep .el-calendar-table .el-calendar-day {
  height: 45px;
  padding: 0;

  p {
    display: block;
    height: inherit;
    padding: 8px;
  }
}

.is-selected {
  color: #1989fa;
}

.is-selected-month {
  background: lightblue;
}
</style>
